<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="camerizer.css" type="text/css">
</HEAD>
<script type="text/javascript" language="JavaScript" src="camerizer.js"></script>
<body>
<h1>Camerizer</h1>
<table width="100%">
<tr>
	<td>
		変換文字列
	</td>
	<td align="right">
		<input type="button" id="pasteText" value="貼り付け" />
	</td>
</tr>
<tr>
	<td colspan="2">
		<textarea id="srcText" cols="80" rows="8" wrap="off"></textarea>
	</td>
</tr>
<tr>
	<td colspan="2">
		<fieldset>
			<legend>変換形式</legend>
			<input type="radio" name="convertType" id="lowerCamel" checked/>
				<label for="lowerCamel" id="labelLowerCamel">lowerCamelCase (先頭が小文字、例：PROPERTY_NAME -&gt; propertyName)</label><br/>
			<input type="radio" name="convertType" id="upperCamel"/>
				<label for="upperCamel" id="labelUpperCamel">UpperCamelCase (先頭が大文字、例：PROPERTY_NAME -&gt; PropertyName)</label><br/>
			<input type="radio" name="convertType" id="reverseCamel"/>
				<label for="reverseCamel" id="labelReverseCamel">REVERSE_CAMERIZE (逆変換、例：propertyName -&gt; PROPERTY_NAME)</label>
		</fieldset>
	</td>
</tr>
<tr id="presuffixRow" style="display:none">
	<td colspan="2">
		<fieldset>
			<legend>Prefix, Suffix (項目名を囲む文字。全体を囲む文字ではない。)</legend>
			<table>
				<tr>
					<td colspan="2">
						<input type="radio" name="round" id="noRound" checked/>
							<label for="noRound">囲まない</label>
					</td>
				</tr>
				<tr>
					<td>
						<input type="radio" name="round" id="roundDq"/>
							<label for="roundDq">""で囲む -&gt; "propertyName"</label>
					</td>
					<td>
						<input type="radio" name="round" id="roundSq"/>
							<label for="roundSq">''で囲む -&gt; 'propertyName'</label>
					</td>
				</tr>
				<tr>
					<td>
						<input type="radio" name="round" id="addColon"/>
							<label for="addColon">先頭にコロン -&gt; :propertyName</label>
					</td>
					<td>
						<input type="radio" name="round" id="addAtMark"/>
							<label for="addAtMark">先頭に@ -&gt; @propertyName</label>
					</td>
				</tr>
				<tr>
					<td>
						<input type="radio" name="round" id="roundSharp"/>
							<label for="roundSharp">##で囲む -&gt; #propertyName#</label>
					</td>
					<td>
						<input type="radio" name="round" id="roundDoller"/>
							<label for="roundDoller">$$で囲む -&gt; $propertyName$</label>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="radio" name="round" id="rountOther"/>
							<label for="rountOther">
								Prefix <input type="text" id="prefix" size="4"/>
								Suffix <input type="text" id="suffix" size="4"/>
								 -&gt; <span id="labelPrefix"></span>propertyName<span id="labelSuffix"></span>
							</label>
					</td>
				</tr>
			</table>
			
		</fieldset>
	</td>
</tr>
<tr id="delimRow" style="display:none">
	<td colspan="2">
		<fieldset>
			<legend>区切り文字 (指定なしの場合は変換前文字列と同じ形式)</legend>
			<input type="checkbox" id="isComma"/>
				<label for="isComma">カンマ (,)</label>
			<input type="checkbox" id="isSpace"/>
				<label for="isSpace">スペース ( )</label>
			<input type="checkbox" id="isCrLf"/>
				<label for="isCrLf" id="labelCrLf">改行 (\r\n)</label><br/>
			<input type="checkbox" id="isOther"/>
				<label for="isOther" id="labelOther">その他</label>
			<input type="text" value="" size="60" id="otherDelim" disabled /><br/>
			<input type="checkbox" id="isCrLfTop" disabled />
				<label for="isCrLfTop" id="labelCrLfTop">区切り文字を行の先頭に付加する</label><br/>
			<input type="checkbox" id="isIndent" disabled />
				<label for="isIndent" id="labelIndent">インデントを付加する&nbsp;</label>
				<span id="labelTabWidth">タブ幅</span>
				<input type="text" id="tabWidth" disabled size="1" maxlength="2" style="text-align:right"/>
		</fieldset>
	</td>
</tr>
<tr align="right">
	<td colspan="2">
		<input type="button" id="showOptions" value=">> オプション"/>
		<input type="button" id="hideOptions" style="display:none" value="<< オプション"/>
	</td>
</tr>
<tr align="right">
	<td colspan="2">
		<input type="button" id="execConvert" value="↓↓↓ 変換 ↓↓↓" />
	</td>
</tr>
<tr>
	<td >
		<span style="margin-right:20px">出力文字列</span>
		<span id="toggleUpper" class="toggle_on" value="on">大文字</span>
		<span id="toggleLower" class="toggle_off" value="off">小文字</span>
	</td>
</tr>
<tr>
	<td colspan="2">
		<textarea id="distText" cols="80" rows="8" wrap="off"></textarea>
	</td>
</tr>
</tr>
<tr align="right">
	<td colspan="2">
		<input type="button" id="copyText" value="コピー" />
	</td>
</tr>
</table>
</body>
<script type="text/javascript" language="JavaScript" src="camerizer-const.js"></script>
<script type="text/javascript" language="JavaScript" src="camerizer-ui.js"></script>
</HTML>
